<template>
    <div class="app-container">

        <header>
            <div>
                <el-form :model="form" label-width="120px" inline>
                    <el-form-item label="报销人" label-width="60px" size="small">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="录入人" size="small">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="收支类型" size="small">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否审核" size="small">
                        <el-select v-model="form.region" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="金额" size="small">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="摘要" label-width="60px" size="small">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" size="small">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="日期" size="small">
                        <el-date-picker v-model="form.region" type="daterange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期" style="width: 499px;">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item size="small" style="margin-left:80px">
                        <el-button type="primary" icon="el-icon-search">查询</el-button>
                        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
                    </el-form-item>

                    <div class="btn">
                        <el-button type="info" size="small" plain>取消审核</el-button>
                        <el-button type="info" size="small" plain>批量审核</el-button>
                        <el-button type="info" size="small" plain>导出</el-button>
                    </div>

                </el-form>
            </div>
        </header>

        <main>
            <div style="height: 597px;margin-top: 20px;">
                <el-table :data="tableData" height="100%" border stripe
                    :default-sort="{ prop: 'date', order: 'descending' }">
                    <el-table-column type="selection" width="55" align="center" />
                    <el-table-column prop="id" label="ID" sortable width="120" align="center" />
                    <el-table-column prop="name" label="日期" width="120" align="center" />
                    <el-table-column prop="item" label="摘要" width="220" align="center" />
                    <el-table-column prop="name" label="资金类型" width="120" align="center" />
                    <el-table-column prop="name" label="类型" width="180" align="center" />
                    <el-table-column prop="name" label="收入" width="180" align="center" />
                    <el-table-column prop="name" label="支出" width="150" align="center" />
                    <el-table-column prop="name" label="收据/发票号" width="150" align="center" />
                    <el-table-column prop="name" label="车牌号" width="120" align="center" />
                    <el-table-column prop="name" label="司机" width="120" align="center" />
                    <el-table-column prop="Reimbursement" label="报销人" width="120" align="center" />
                    <el-table-column prop="ep" label="备注" width="250" align="center" />
                    <el-table-column prop="editer" label="录入人" width="120" align="center" />
                    <el-table-column prop="name" label="录入日期" width="120" align="center" />
                    <el-table-column prop="name" label="是否审核" width="120" align="center" />
                    <el-table-column prop="sure" label="审核人" width="120" align="center" />
                    <el-table-column prop="name" label="审核时间" width="120" align="center" />
                    <el-table-column prop="name" fixed="right" label="操作" width="160">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary"
                                @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                            <el-button size="mini" type="danger"
                                @click="handleDelete(scope.$index, scope.row)" class="el-icon-delete">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </main>

        <!-- 分页 -->
        <footer>
            <div class="money">
                <p>收入：<span>￥146,550 元</span></p>
                <p>支出：<span>￥62,723 元</span></p>
                <p>余额：<span>￥83,327 元</span></p>
            </div>
            <div class="pagin">
                <el-pagination background :current-page="1" :page-sizes="[20, 50, 100, 150]"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" :page-size="initParams.pageSize" />
            </div>
        </footer>


        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
            <el-form :model="form" inline>
                <el-form-item label="ID" label-width="80px" size="small">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="金额" :label-width="formLabelWidth" size="small">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="收据" :label-width="formLabelWidth" size="small">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="车牌号" label-width="80px" size="small">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="司机" :label-width="formLabelWidth" size="small">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="报销人" :label-width="formLabelWidth" size="small">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="日期" label-width="80px" size="small">
                    <el-date-picker v-model="form.name" type="date" placeholder="请选择日期" style="width: 190px;" />
                </el-form-item>
                <el-form-item label="是否审核" size="small" :label-width="formLabelWidth">
                    <el-select v-model="form.region" placeholder="请选择活动区域" style="width:190px">
                        <el-option label="是" value="shanghai"></el-option>
                        <el-option label="否" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注" label-width="115px" size="small">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="收支类型" required label-width="80px" size="small">
                    <el-select v-model="form.region" placeholder="请选择活动区域" style="width:190px">
                        <el-option label="是" value="shanghai"></el-option>
                        <el-option label="否" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="资金类型" label-width="115px" size="small" required>
                    <el-select v-model="form.region" placeholder="请选择活动区域" style="width:190px">
                        <el-option label="是" value="shanghai"></el-option>
                        <el-option label="否" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="资金信息" style="margin-left:10px;">
                    <el-input v-model="form.name" type="textarea" style="width: 700px;"
                        placeholder="示例1: 工商银行/6220220888888888888: 示例2: 微信/企达科技"></el-input>
                </el-form-item>
            </el-form>


            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false" style="margin-right:20px">关 闭</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
/**
* @author        Yng
* @time          2023-11-09 14:50:58  星期四
* @description   日常收支管理
**/

import { payOutAPI } from '@/api/adminstare'
export default {
    data() {
        return {
            dialogFormVisible: false,
            dialogTitle: '',
            formLabelWidth: '120px',
            form: { name: '', region: '' },
            tableData: [],
            initParams: {
                action: "moneyKzList",
                page: 1,
                pageSize: 20,
            },
            // 分页总条数
            total: 0,
        }
    },
    mounted() {
        this.getListData()
    },
    methods: {
        async getListData() {
            try {
                const result = await payOutAPI(this.initParams)
                this.total = result.total
                this.tableData = result.data
                console.log(result);

            } catch (error) { }
        },
        // 修改回调
        handleEdit() {
            this.dialogFormVisible = true
            this.dialogTitle = '修改'
        },
        // 新增回调
        handleAdd() {
            this.dialogFormVisible = true
            this.dialogTitle = '新增'
        },
        // 一页几条数据
        handleSizeChange(val) {
            this.initParams.pageSize = val
            this.getListData();
        },
        // 当前页
        handleCurrentChange(val) {
            this.initParams.page = val
            this.getListData();
        },
    },
}
</script>

<style lang="scss" scoped>
.el-form-item {
    margin-bottom: 18px;
}

footer {

    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;

    .money {
        width: 100%;
        display: flex;
        margin-top: 20px;

        p {
            margin: 0;
            padding: 0;
        }

        p:first-child {
            display: flex;
            span {
                color: rebeccapurple;
            }
        }

        p:nth-of-type(2) {
            margin-left: 30px;
            span {
                color: #3498db;
            }
        }

        p:last-child {
            margin-left: 30px;
            span:last-child {
                color: red;
            }
        }

        p:first-child::before,
        p:nth-of-type(2)::before,
        p:last-child::before {
            display: inline-block;
            content: '';
            width: 13px;
            height: 13px;
            border-radius: 50%;
            margin-right: 5px;
        }

        p:first-child::before {
            background: rebeccapurple;
        }

        p:nth-of-type(2)::before {
            background: #3498db;
        }

        p:last-child::before {
            background: red;
        }
    }
}

.dialog-footer {
    text-align: center;
}
</style>